<script lang="ts" setup>
  import { withDefaults, defineProps, ref, computed } from 'vue';
  import { useFormSetting } from '/@/hooks/setting/useFormSetting';
  import eventBus from '/@/utils/eventBus';
  import { FormItem, Row, Col, InputNumber, Input, Form, FormItemRest } from 'ant-design-vue';
  import cdIconCurrency from '/@/components-cd/Icon/currency/cd-icon-currency.vue';

  interface Props {
    // redUpperLimit: string | number;
    dailyCollectionLimit: string | number;
    redBagCountDown: string | number;
    currencyName: string;
  }

  const props = withDefaults(defineProps<Props>(), {
    dailyCollectionLimit: '',
    redBagCountDown: '',
  });

  const FORM_SIZE = useFormSetting().getFormSize;

  const emit = defineEmits(['update:dailyCollectionLimit', 'update:redBagCountDown']); // 'update:redUpperLimit',

  const basicConfigRef = ref();

  const formState = computed(() => ({
    // redUpperLimit: props.redUpperLimit,
    dailyCollectionLimit: props.dailyCollectionLimit,
    redBagCountDown: props.redBagCountDown,
  }));
  const currencyName = computed(() => props.currencyName);

  async function validationFunc() {
    return new Promise((resolve) => {
      basicConfigRef.value
        .validate()
        .then(() => {
          resolve(true);
        })
        .catch(() => {
          resolve(false);
        });
    });
  }
  async function clearValidateInfo() {
    basicConfigRef.value.clearValidate();
  }

  function updatedailyCollectionLimit(e) {
    console.log(e);
    emit('update:dailyCollectionLimit', e.target.value);
    eventBus.emit('updatedailyCollectionLimit', e.target.value);
  }
  function updateRedBagCountdown(e) {
    console.log(e);
    emit('update:redBagCountDown', e.target.value);
    // eventBus.emit('updateRedBagCountdown', val);
  }
  // function validateLimit(_, value) {
  //   if (value && value <= 0) {
  //     return Promise.reject('奖金必须大于0');
  //   }
  // }
  defineExpose({
    validationFunc,
    clearValidateInfo,
  });
</script>

<template>
  <div>
    <Form ref="basicConfigRef" :model="formState" validate-trigger="blur">
      <Row>
        <Col :span="16">
          <FormItem
            required
            label="单会员领取上限"
            :rules="[
              { required: true, message: '请输入每日领取上限' },
              { pattern: /^(0\.\d*[1-9]\d*|[1-9]\d*(\.\d+)?)$/, message: '格式不正确' },
            ]"
            name="dailyCollectionLimit"
          >
            <Input
              :min="0"
              :size="FORM_SIZE"
              :stringMode="true"
              :value="dailyCollectionLimit"
              placeholder="请输入单个账号每日领取奖金上限"
              @change="(e) => updatedailyCollectionLimit(e)"
            >
              <template #prefix>
                <cd-icon-currency :icon="currencyName" class="w-5" />
              </template>
            </Input>
          </FormItem>
        </Col>

        <Col :span="16" style="margin-left: 27px">
          <FormItem
            required
            label="红包倒计时："
            :rules="[
              { required: true, message: '请输入红包倒计时' },
              { pattern: /^(0\.\d*[1-9]\d*|[1-9]\d*(\.\d+)?)$/, message: '格式不正确' },
            ]"
            name="redBagCountDown"
          >
            <Input
              :min="0"
              :size="FORM_SIZE"
              :stringMode="true"
              :value="redBagCountDown"
              placeholder="红包提前多少分钟开始进行倒计时"
              @change="(e) => updateRedBagCountdown(e)"
              addon-after="分钟"
              style="max-width: 96.5%"
            />
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<style lang="less" scoped>
  ::v-deep(.ant-input-group-addon) {
    background-color: #dce3f1;
  }
</style>
